<template>
  <div>
    <h2>{{ this.id ? "修改友链：" : "添加友链：" }}</h2>
    <el-form label-width="100px" :model="models" :rules="rules" ref="friendref">
      <el-form-item label="站点名称：" prop="b_name">
        <el-input style="width: 300px" v-model="models.b_name"></el-input>
      </el-form-item>
      <el-form-item label="站点简介：" prop="b_introduce">
        <el-input style="width: 450px" v-model="models.b_introduce"></el-input>
      </el-form-item>
      <el-form-item label="站点链接：" prop="b_link">
        <el-input style="width: 600px" v-model="models.b_link"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getFriend">{{
          this.id ? "修 改" : "添 加"
        }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {
  getFriendlinkadd,
  getFrendlinkedit,
  getFriendlinkdetail,
} from "@/api/index.js";
export default {
  props: ["id"],
  data() {
    return {
      models: {},
      rules: {
        b_name: [
          { required: true, message: "请输入站点名称", trigger: "blur" },
        ],
        b_introduce: [
          { required: true, message: "请输入站点简介", trigger: "blur" },
        ],
        b_link: [
          { required: true, message: "请输入站点链接", trigger: "blur" },
        ],
      },
    };
  },
  mounted() {
    this.id && this.getFriendDetail();
  },
  methods: {
    getFriend() {
      this.$refs.friendref.validate((valid) => {
        if (valid) {
          if (this.id) {
            getFrendlinkedit(this.id, this.models).then((res) => {
              if (res.data.status == 200) {
                this.$message.success(res.data.msg);
                this.$router.push(`/friendlinkList`);
              }
            });
          } else {
            getFriendlinkadd(this.models).then((res) => {
              if (res.status == 200) {
                this.$message.success("添加成功！");
                this.$refs.friendref.resetFields();
                this.$router.push(`/friendlinkList`);
              }
            });
          }
        } else {
          this.$message.error("请将数据补充完整！");
        }
      });
    },
    getFriendDetail() {
      getFriendlinkdetail(this.id).then((res) => {
        console.log(res);
        this.models = res.data;
      });
    },
  },
};
</script>

<style lang="less" scoped></style>
